<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
    <!-- Bootstrap 的 CSS 文件 -->
    <link rel="stylesheet" href="css/bootstrap.css" />
    <link rel="stylesheet" href="css/comm.css" />
    <link rel="stylesheet" href="css/swiper.min.css" />
    <link rel="stylesheet" href="css/font.css" />
    <link rel="stylesheet" href="css/message.css" />
    <link rel="stylesheet" href="css/footer.css" />
    <link rel="stylesheet" href="css/invoice_h5_baseInfo.css" />
    <title>维亚生物试剂</title>
  </head>

  <body style="background-color: #f4f4f4">
    <!-- pc头部搜索，banner -->
    <header>
      <!-- 头部 -->
      <img src="./image/settion.png" alt="" class="seting" />
      <div class="header_title">发票信息</div>
      <div style="width: 30px"></div>
      <div class="mobilelist">
        <div
          class="d-flex justify-content-between mobmentyop align-items-center"
        >
          <i class="bi bi-x-lg closenr"></i>
        </div>
        <div class="mobilmenuLi">
          <div style="height: 30px"></div>
          <li class="active">
            <a href="#!">基本信息</a>
          </li>
          <li>
            <a href="#!">公司资料</a>
          </li>
          <li>
            <a href="#!">我的订单</a>
          </li>
          <li>
            <a href="#!">我的购物车</a>
          </li>
          <li>
            <a href="#!">收货地址</a>
          </li>
          <li>
            <a href="#!">发票信息</a>
          </li>
          <li>
            <a href="#!">我的收藏</a>
          </li>
          <li>
            <a href="#!">绑定微信/绑定企业微信</a>
          </li>
        </div>
      </div>
    </header>
    <div class="Appconatiner">
      <div class="basic_info">
        <div class="basic_info_header">
          <div class="flex_row">
            <div class="avatar">
              <img src="./image/zhuce.png" alt="" srcset="" />
            </div>
            <div class="name">用户001</div>
          </div>
          <div class="flex_row">
            <button class="btn btn-success addInvoice" type="submit">
              新增增值税发票
            </button>
            <div class="exit">退出</div>
          </div>
        </div>
      </div>
      <!-- 发票信息 -->
      <div class="invoiceInfo_container">
        <div class="invoice-group-item">
          <div class="invoice-group-item-top">
            <div class="invoice-group-item-title">开票信息</div>
            <div class="flex_row">
              <a
                style="
                  color: #3062b9;
                  text-decoration: underline;
                  cursor: pointer;
                  margin-right: 0.875rem;
                "
                >编辑</a
              >
              <a style="color: #575757; cursor: pointer">删除</a>
            </div>
          </div>
          <div class="invoice-group_container">
            <div class="flex_row" style="width: 100%">
              <div class="col-4">
                <span>发票抬头</span>
                <span>xxxxxxxxx</span>
              </div>
              <div class="col-4">
                <span>纳税人识别号</span>
                <span>xxxxxxxxx</span>
              </div>
              <div class="col-4">
                <span>注册地址</span>
                <span>xxxxxxxxx</span>
              </div>
            </div>
            <div class="flex_row" style="width: 100%; margin-top: 0.85rem">
              <div class="col-4">
                <span>注册电话</span>
                <span>xxxxxxxxx</span>
              </div>
              <div class="col-4">
                <span>开户银行</span>
                <span>xxxxxxxxx</span>
              </div>
              <div class="col-4">
                <span>银行账户</span>
                <span>xxxxxxxxx</span>
              </div>
            </div>
          </div>
        </div>
        <div class="invoice-gap"></div>
        <div class="invoice-group-item">
          <div class="invoice-group-item-top">
            <div class="invoice-group-item-title">开票信息</div>
            <div class="flex_row">
              <a
                style="
                  color: #3062b9;
                  text-decoration: underline;
                  cursor: pointer;
                  margin-right: 0.875rem;
                "
                >编辑</a
              >
              <a style="color: #575757; cursor: pointer">删除</a>
            </div>
          </div>
          <div class="invoice-group_container">
            <div class="flex_row" style="width: 100%">
              <div class="col-4">
                <span>发票抬头</span>
                <span>xxxxxxxxx</span>
              </div>
              <div class="col-4">
                <span>纳税人识别号</span>
                <span>xxxxxxxxx</span>
              </div>
              <div class="col-4">
                <span>注册地址</span>
                <span>xxxxxxxxx</span>
              </div>
            </div>
            <div class="flex_row" style="width: 100%; margin-top: 0.85rem">
              <div class="col-4">
                <span>注册电话</span>
                <span>xxxxxxxxx</span>
              </div>
              <div class="col-4">
                <span>开户银行</span>
                <span>xxxxxxxxx</span>
              </div>
              <div class="col-4">
                <span>银行账户</span>
                <span>xxxxxxxxx</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

     <!-- 弹出框发票 -->
     <div id="fixPhone">
      <div class="fixClonse">
        <div class="icon-close butonClose">
          <i class="bi bi-x-lg"></i>
        </div>
      </div>
      <div class="fixDivconatiner">
        <div class="d-flex align-items-center fixHeader">
          <img src="./image/invoice.png" alt="">
          <span>发票信息</span>
        </div>
        <div class="fixCzontent">
          <div class="cheButton d-flex align-items-center justify-content-around">
             <div class="addbuttoms zhuangyong showbackgruns">
              <span>增值税专用发票</span>
             </div>
             <div class="addbuttoms putong">
              <span>增值税普通发票</span>
             </div>
          </div>
          <div class="zhuandiv">
          <div class="fixfapiao d-flex align-items-center justify-content-between">
            <div class="login-input-left d-flex align-items-center">
             <span>发票抬头</span>
            </div>
            <input
              type="text"
              class="login-input-container"
              placeholder="输入公司名称"
            />
          </div>
          <div class="fixfapiao d-flex align-items-center justify-content-between">
            <div class="login-input-left d-flex align-items-center">
             <span>纳税人识别号</span>
            </div>
            <input
              type="text"
              class="login-input-container"
              placeholder="输入纳税人识别号"
            />
          </div>
          <div class="fixfapiao d-flex align-items-center justify-content-between">
            <div class="login-input-left d-flex align-items-center">
             <span>注册地址</span>
            </div>
            <input
              type="text"
              class="login-input-container"
              placeholder="输入单位注册地址"
            />
          </div>
          <div class="fixfapiao d-flex align-items-center justify-content-between">
            <div class="login-input-left d-flex align-items-center">
             <span>注册电话</span>
            </div>
            <input
              type="text"
              class="login-input-container"
              placeholder="输入单位注册电话"
            />
          </div>
          <div class="fixfapiao d-flex align-items-center justify-content-between">
            <div class="login-input-left d-flex align-items-center">
             <span>开户银行</span>
            </div>
            <input
              type="text"
              class="login-input-container"
              placeholder="输入开户银行"
            />
          </div>
          <div class="fixfapiao d-flex align-items-center justify-content-between">
            <div class="login-input-left d-flex align-items-center">
             <span>银行账户</span>
            </div>
            <input
              type="text"
              class="login-input-container"
              placeholder="输入银行账户"
            />
          </div>
          <div class="d-flex align-items-center morse">
             <div class="morendiv d-flex align-items-center justify-content-center">
               <div class="shocosame"></div>
             </div>
             <span>设为默认</span>
          </div>
        </div>
        <div class="putongdiv">
          <div class="fixfapiao d-flex align-items-center justify-content-between">
            <div class="login-input-left d-flex align-items-center">
             <span>发票抬头</span>
            </div>
            <input
              type="text"
              class="login-input-container"
              placeholder="输入公司名称"
            />
          </div>
          <div class="fixfapiao d-flex align-items-center justify-content-between">
            <div class="login-input-left d-flex align-items-center">
             <span>纳税人识别号</span>
            </div>
            <input
              type="text"
              class="login-input-container"
              placeholder="输入纳税人识别号"
            />
          </div>
          <div class="d-flex align-items-center morse">
             <div class="morendiv d-flex align-items-center justify-content-center">
               <div class="shocosame"></div>
             </div>
             <span>设为默认</span>
          </div>
        </div>
        
        </div>
        <div class="fixbottom d-flex justify-content-center">
        
          <div class="d-flex justify-content-center align-items-center bottomBUtom shocolor">
            <span>确定</span>
          </div>
          <div class="d-flex justify-content-center align-items-center bottomBUtom ">
            <span>取消</span>
          </div>
        </div>
      </div>
     </div>
    <!-- 底部 -->
    <footer class="d-flex justify-content-center align-items-center flex-wrap">
      <ul>
        <li class="topbig"><a href="#!">产品中心</a></li>
        <li><a href="#!">体外诊断试剂</a></li>
        <li><a href="#!"> 药研试剂</a></li>
        <li><a href="#!">定制服务</a></li>
      </ul>
      <div class="line"></div>
      <ul>
        <li class="topbig"><a href="#!">友情链接</a></li>
        <li><a href="https://www.vivabioinnovator.com">维亚生物创新中心</a></li>
        <li><a href="https://www.langhuapharma.com">朗华制药</a></li>
        <li><a href="https://synmedchem.com">信实医药</a></li>
      </ul>
      <div class="line"></div>
      <ul>
        <li class="topbig"><a href="#!">关注我们</a></li>
        <div class="d-flex align-items-center sunsnediv">
          <div
            class="cicleine d-flex align-items-center justify-content-center weixnimg"
          >
            <img src="./image/weixin.png" alt="" srcset="" />
            <div class="hidden-div">
              <p class="shahr">微信扫一扫：分享</p>
              <img src="./image/ewm.jpg" alt="" />
              <p>扫一扫关注公众号</p>
            </div>
          </div>
          <div
            class="cicleine d-flex align-items-center justify-content-center insimg"
          >
            <a
              href="https://www.linkedin.cn/incareer/company/14402828/admin"
              target="_blank"
            >
              <img src="./image/ins.png" alt="" srcset="" />
            </a>
          </div>
          <div
            class="cicleine d-flex align-items-center justify-content-center insimg"
          >
            <a href="https://twitter.com/viva_biotech" target="_blank">
              <img src="./image/twitter.png" alt="" srcset="" />
            </a>
          </div>
        </div>
      </ul>
      <div class="line"></div>
      <ul>
        <li class="topbig"><a href="#!">联系我们</a></li>
      </ul>
    </footer>
    <!-- 选项 1：jQuery 和 Bootstrap 集成包（集成了 Popper） -->
    <script src="js/bootstrap.js"></script>
    <script src="js/index.js"></script>

    <script>
      $(".closenr").click(function () {
        $(".mobilelist").removeClass("slide-right");
        $(".mobilelist").addClass("slide-out-left");
        setTimeout(function () {
          $(".mobilelist").css("display", "none");
        }, 1000);
      });

      $(".seting").click(function () {
        $(".mobilelist").removeClass("slide-out-left");
        $(".mobilelist").css("display", "block");
        $(".mobilelist").addClass("slide-right");
      });

      $(".addInvoice").click(function () {
           $("#fixPhone").css("display", "block");
           disableScroll()
      });
      $(".butonClose").click(function () {
           $("#fixPhone").css("display", "none");
           
           enableScroll()
      });
      $(".cancelButon").click(function () {
           $("#fixPhone").css("display", "none");
           
           enableScroll()
      });

      $(".morendiv").click(function () {
          if($(".shocosame").css('display') =='block') {
            $(".shocosame").css('display','none')
          }else{
            $(".shocosame").css('display','block')
          }
      });
      $(".zhuangyong").click(function () {
         if($(".putong").hasClass('showbackgruns')){
          $(".zhuangyong").addClass('showbackgruns')
          $(".putong").removeClass('showbackgruns')
          $(".zhuandiv").css('display', 'block')
          $(".putongdiv").css('display', 'none')
          
         }
       
      });
      $(".putong").click(function () {
        $(".zhuandiv").css('display', 'none')
        $(".putongdiv").css('display', 'block')
         if($(".zhuangyong").hasClass('showbackgruns')){
          $(".putong").addClass('showbackgruns')
          $(".zhuangyong").removeClass('showbackgruns')
         }
       
      });
      
     
      


      function disableScroll() {
  document.body.style.overflow = 'hidden';
}
 
// 启用滚动
function enableScroll() {
  document.body.style.overflow = 'auto'; // 或者 'scroll'，根据需求选择
}
      window.onresize = function () {};
      window.dispatchEvent(new Event("resize"));
    </script>
  </body>
</html>
